<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Expenses-record</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="format-detection" content="email=no,address=no,telephone=no" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
	<script type="text/javascript" src="../js/zepto.min.js"></script>
	<script type="text/javascript" src="../js/mediaFize.js"></script>
	<script type="text/javascript" src="../js/util.js"></script>
	<script type="text/javascript" src="../js/swiper-3.4.0.min.js"></script>
	<script type="text/javascript" src="../js/weui.min.js"></script>
	<script type="text/javascript" src="../js/timer.js"></script>
	<link type="text/css" rel="stylesheet" href="../css/home.css" />
	<link type="text/css" rel="stylesheet" href="../css/swiper-3.4.0.min.css" />
	<link type="text/css" rel="stylesheet" href="../css/weui.min.css" />
	<link type="text/css" rel="stylesheet" href="css/record.css" />
	<style>
		#pageSwaper{
			padding-bottom: .1rem;
		}
	</style>
</head>
<body>
<div id="pageSwaper">
	<div class="record_list_bg">
		<div class="input_bg">
			<div class="input">
				<input type="text" class="record" value="夏磊" readonly="readonly" onfocus="this.blur()"/>
			</div>
			<div class="input type">
				<input type="text" class="type" id="form_type" placeholder="请填写使用事项" value="" readonly="readonly" onfocus="this.blur()"/>
				<i class="icon"></i>
			</div>
			<div class="input">
				<input type="numble" class="money" placeholder="使用金额" value="" pattern="[0-9]*"/>
			</div>
			<div class="input date ma_expect_date">
				<input type="text" class="date" placeholder="请输入使用时间" value="" readonly="readonly" onfocus="this.blur()"/>
				<i class="icon"></i>
			</div>
			<div class="choose_area clearfix">
				<div class="title">请选择消费人 : </div>
				<!--<a href="javascript:void(0);" class="step">-->
				<!--<i class="check"></i>-->
				<!--<span>熊聪</span>-->
				<!--</a>-->
				<!--<a href="javascript:void(0);" class="step">-->
				<!--<i class="check"></i>-->
				<!--<span>彭文</span>-->
				<!--</a>-->
				<!--<a href="javascript:void(0);" class="step">-->
				<!--<i class="check"></i>-->
				<!--<span>潘鸿飞</span>-->
				<!--</a>-->
				<!--<a href="javascript:void(0);" class="step">-->
				<!--<i class="check"></i>-->
				<!--<span>操文健</span>-->
				<!--</a>-->
				<!--<a href="javascript:void(0);" class="step">-->
				<!--<i class="check"></i>-->
				<!--<span>夏磊</span>-->
				<!--</a>-->
			</div>
			<div class="textarea" id="wordCount">
				<textarea placeholder="请输入备注描述限制50字"></textarea>
				<span class="wordwrap"><var class="word">0</var>/50</span>
			</div>
			<div class="to_submit"><span>提&nbsp;&nbsp;交</span></div>
		</div>
	</div>
	<div class="sure" style="display: none;">
		<div class="sure_bg">
			<p class="sure_title">请确认您要记录的账单信息</p>
			<ul>
				<li class="type">记录事项 : <span>洗发水</span></li>
				<li class="money">记录金额 : <span>XXXX</span></li>
				<li class="date">记录时间 : <span>2017/08/22</span></li>
				<li class="person">记录消费人 : 
					<span>
					</span>
				</li>
				<li class="textarea">备注 : <span>暂无</span></li>
			</ul>
			<p class="tip">请再次确认账单准确性，<br/>账单一经确认，概不可修改。</p>
			<div class="buttom">
				<div class="to_back"><span>返回修改</span></div>
				<div class="to_sure"><span>确认提交</span></div>
			</div>
		</div>
	</div>
</div>

<script>
	$(function(){
		var arr=[];//消费类型
		var costype,costmoney,costdate,description;
		var costusers=[]//消费人；
		$.ajax({
			url : './../../common/getCode',
			type:'get',
			data:{
				codeType:"USER"
			},
			dataType:'json',
			success : function(result) {// 成功时的回调函数
				for(var i in result){
					$(".choose_area").append('<a href="javascript:void(0);" class="step"> <i class="check"></i> <span dateCode="'+result[i].code+'">'+result[i].name+'</span> </a>');
				}
			}
		});
		$.ajax({
			url : './../../common/getCode',
			type:'get',
			data:{
				codeType:"COSTTYPE"
			},
			dataType:'json',
			success : function(result) {// 成功时的回调函数
//				for(var i in result){
//					arr.push(result[i].name);
//				}
				arr=result;
			}
		});

		$(".user_footer>ul>li").on("click",function(){
			var index=$(this).index();
			if(index==0){
				window.location.href="index.html";
			}else if(index==1){
				window.location.href="total.html";
			}
		})
		$(".choose_area").on('click','.step',function(){
			$(this).find("i").toggleClass("active");
		})
		//  消费事项
		$('#form_type').click(function(){
			var costType=arr;
			weui.picker(creat(costType), {
				className: 'custom-classname',
				defaultValue: '北区',//默认显示
//                  取消
				onChange: function (result) {},
//                  确定
				onConfirm: function (result) {
					$('#form_type').val(result[0].label);
					$('#form_type').attr("dataType",result[0].value);
				},
				id: 'singleLinePicker'
			});
		});
		function creat(costType){
			var mewArr=[];
			for(var i=0;i<costType.length;i++){
				mewArr[i]={};
				mewArr[i].label=costType[i].name;
//				mewArr[i].code=costType[i].code;
				mewArr[i].value=costType[i].code;
			}
			return mewArr;
		}
		//时间选择器
		$('.ma_expect_date').click(function(event) {
			var _this = this;
			weui.datePicker({
				start: new Date().getFullYear(),
				end: 2018,
				defaultValue: [new Date().getFullYear(), new Date().getMonth()+1, new Date().getDate()],
				onChange: function (result) {},
//                  确定
				onConfirm: function (result) {
					if(result[1]<10){
						result[1]="0"+result[1];
					}
					if(result[2]<10){
						result[2]="0"+result[2];
					}
					$('.ma_expect_date>input').val(result[0]+"/"+result[1]+"/"+result[2]);
				},
				id: 'ma_expect_date',
				//className: 'ma_expect_date_picker'
			});
		});
		$(".input_bg").on('click','.to_submit',function(){
			//使用事项
			var type=$('.input .type').val();
			if(type==''){
				showMaskEditCom({text: "请输入您的记录事项",duration: 1500});
				return false;
			}
			//金额
			var isNum=/^(0(?:[.](?:[1-9]\d?|0[1-9]))|[1-9]\d*(?:[.]\d{1,2}|$))$/;
			var money=$('.input .money').val();
			if(money==''){
				showMaskEditCom({text: "请输入您的记录金额",duration: 1500});
				return false;
			}
			if(isNum.test(money)==false){
				showMaskEditCom({text: "请输入正确的记录金额",duration: 1500});
				return false;
			}
			//日期
			var date=$('.input .date').val();
			if(date==''){
				showMaskEditCom({text: "请输入记录日期",duration: 1500});
				return false;
			}
			var flag=$(".choose_area>.step").find("i").hasClass("active");
			if(!flag){
				showMaskEditCom({text: "请选择消费人",duration: 1500});
				return false;
			}
			//备注
//	        var txt=$('.textarea>textarea').val();
//	        if(txt==''){
//	        	showMaskEditCom({text: "请输入记录备注",duration: 1500});
//	        	return false;
//	        }

			$('.sure').show();
			show();
		})
		function show(){
			costype=$("#form_type").attr("datatype");
			costmoney=$(".input .money").val();
			costdate=$(".input .date").val();
			description=$(".textarea>textarea").val();
			var costUser=[];
			$(".input>input").forEach(function(){
				$(".sure .type>span").text($(".input .type").val());
				$(".sure .money>span").text(costmoney);
				$(".sure .date>span").text(costdate);
			});
			var length=$(".choose_area .step").size();
			for(var i=0;i<length;i++){
				if($(".choose_area .step").eq(i).find("i").hasClass("active")){
					var name=$(".choose_area .step").eq(i).find("span").text();
					var code=$(".choose_area .step").eq(i).find("span").attr("datecode");
					costUser.push(name);
					costusers.push(code);
				}
			}
			$(".sure .person>span").text(costUser.toString());
			if(description==""){
				$(".sure .textarea>span").text("暂无")
			}else{
				$(".sure .textarea>span").text(description)
			}
		}
		$(".sure").on("click",".to_sure",function(){

			$.ajax({
				url : './../../bill/record',
				type:'POST',
				data:{
					billType:costype,
					totalMoney:costmoney,
					recordDate:costdate,
					costUsers:costusers.toString(),
					description:description,
				},
				dataType:'json',
				success : function(result) {// 成功时的回调函数
					if(result.code == 1){
						$(".sure").hide();
						showMaskEditCom({text: "记录成功",duration: 1500});
						setTimeout(function(){
							window.location.href="./index.html";
						},2000)
					}else{
						$(".sure").hide();
						showMaskEditCom({text: "记录失败，请重新记录",duration: 1500});
						return false;
					}
				}
			});
		})
		$(".sure").on("click",".to_back",function(){
			$(".sure").hide();
		})
		//先选出 textarea 和 统计字数 dom 节点
		var wordCount = $("#wordCount"),
				textArea = wordCount.find("textarea"),
				word = wordCount.find(".word");
		//调用
		statInputNum(textArea,word);
		//剩余字数统计
		function statInputNum(textArea,numItem) {
			var max = 50,
					curLength;
			textArea[0].setAttribute("maxlength", max);
			curLength = textArea.val().length;
			numItem.text(curLength);
			textArea.on('input propertychange', function () {
				numItem.text($(this).val().length);
			});

		}
	});
</script>
</body>
</html>
